<!--
 * @Author: liuhanzhuang
 * @Date: 2023-01-09 11:30:03
 * @Description: 文件描述
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    :root {
      --border-color: #144fc6;
      --fill-color: #6ab3f8;
      --bg-color: #3494e4;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: '猫啃网糖圆体 (测试版)';
      color: #fff;
      height: 100vh;
      background-color: var(--bg-color);
    }

    .container {
      display: flex;
      flex-direction: column;
    }

    .big-cup {
      width: 150px;
      height: 250px;
      border: 5px solid var(--border-color);
      border-radius: 0 0 30px 30px;
      background-color: #fff;
      color: var(--border-color);
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
    }

    .remained {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .percentage {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font: 26px bold;
      background-color: var(--fill-color);
      height: 0px;
      width: 100%;
      transition: all .3s ease-in;
    }

    .cups {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      width: 240px;
    }

    .cup-small {
      width: 50px;
      height: 100px;
      background-color: #fff;
      border-radius: 0 0 25px 25px;
      border: 3px solid var(--border-color);
      color: var(--border-color);
      font: 13px bold;
      text-align: center;
      line-height: 100px;
    }

    .cup-small.high-fill {
      background-color: var(--fill-color);
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1 class="title">喝水记录</h1>
    <h3 class="target">目标: 2升</h3>
    <div class="cup big-cup">
      <div class="remained">
        <span class="lister">2L</span>
        <small class="shengyuText">剩余</small>
      </div>
      <div class="percentage">
        <span class="percentageText"></span>
      </div>

    </div>
    <h3>选择你喝了多少杯水</h3>
    <div class="cups">
      <div class="cup-small" data-index="1">250ml</div>
      <div class="cup-small" data-index="2">250ml</div>
      <div class="cup-small" data-index="3">250ml</div>
      <div class="cup-small" data-index="4">250ml</div>
      <div class="cup-small" data-index="5">250ml</div>
      <div class="cup-small" data-index="6">250ml</div>
      <div class="cup-small" data-index="7">250ml</div>
      <div class="cup-small" data-index="8">250ml</div>
    </div>
  </div>
</body>
<script>
  let cupsSmall = document.querySelectorAll('.cup-small');
  let percentage = document.querySelector('.percentage');
  let remainedEl = document.querySelector(".remained");
  let percentageTextEl = document.querySelector(".percentageText");
  let shengyuTextEl = document.querySelector(".shengyuText");
  cupsSmall.forEach((item) => {
    item.addEventListener('click', (ev) => {
      if (ev.target.classList.contains('cup-small')) {
        setHigh(ev.target.getAttribute('data-index'));
      }
    });
  });

  function setHigh(idx) {
    let totalCups = cupsSmall.length; //总共杯子数量
    let fillCups = idx; //喝了几杯
    cupsSmall.forEach((item, index) => {
      if (idx == 1 && index == 0) {
        item.classList.toggle('high-fill');
        if (!item.classList.contains('high-fill')) {
          percentage.style.height = '0px';
          fillCups = 0;
        }
      } else if (index < idx) {
        item.classList.add('high-fill');
      } else {
        item.classList.remove('high-fill');
      }
    });

    percentage.style.height = `${(fillCups / totalCups) * 250}px`;
    percentageTextEl.textContent = `${(fillCups / totalCups) * 100}%`;
    shengyuTextEl.textContent = `剩余${2 - fillCups / totalCups * 2}L`;
    if (fillCups == totalCups) {
      remainedEl.style.display = 'none';
    } else {
      remainedEl.style.display = 'flex';
    }
  }
</script>

</html>